<template>
  <div class="app-container">
    <div class="main">
      <div class="har-container word_break__break_all">
        <div class="item">
          <div class="tips">消息类型</div>
          <div class="num">
            <p>{{ msgObj.type | typeFilter }}</p>
          </div>
        </div>
        <div class="item" v-if="msgObj.type === 4">
          <div class="tips">设备</div>
          <div class="num">
            <p>{{ msgObj.pushType | pushByFilter }}</p>
          </div>
        </div>
        <div class="item" v-if="[1, 2, 3].includes(msgObj.type)">
          <div class="tips">推送方式</div>
          <div class="num">
            <p>{{ msgObj.pushBy | pushByFilter }}</p>
          </div>
        </div>

        <template v-if="msgObj.type === 3">
          <div class="item">
            <div class="tips">当前版本</div>
            <div class="num">
              <p>{{ versionObj.currentVersion }}</p>
            </div>
          </div>
          <div class="item">
            <div class="tips">目标版本</div>
            <div class="num">
              <p>{{ versionObj.targetVersion }}</p>
            </div>
          </div>
        </template>

        <div class="item" v-if="[5, 6].includes(msgObj.type)">
          <div class="tips">协议类型</div>
          <div class="num">
            <p>{{ msgObj.type | protocolTypeFilter }}</p>
          </div>
        </div>

        <div class="item">
          <div class="tips">创建人</div>
          <div class="num">
            <p>{{ msgObj.createBy }}</p>
          </div>
        </div>
        <div class="item">
          <div class="tips">推送时间</div>
          <div class="num">
            <p>{{ msgObj.createDate }}</p>
          </div>
        </div>

        <template v-if="[1, 2, 3].includes(msgObj.type)">
          <div class="item grid_column_1">
            <div class="tips">消息标题</div>
            <div class="num">
              <p>{{ msgObj.title }}</p>
            </div>
          </div>
          <div class="item grid_column_1">
            <div class="tips">推送内容</div>
            <div class="num">
              <p>{{ msgObj.message }}</p>
            </div>
          </div>
        </template>

        <div class="item grid_column_1" v-if="msgObj.type === 4">
          <div class="tips">下载地址</div>
          <div class="num picture_path_warp">
            {{ msgObj.picturePath }}
            <div @click="handleClipboard(msgObj.picturePath || '')" class="clipboard_warp" v-if="msgObj.picturePath">
              <svg-icon icon-class="clipboard" />
            </div>
          </div>
        </div>

        <div class="item grid_column_1" v-if="msgObj.type === 5">
          <div class="tips">协议地址</div>
          <div class="num picture_path_warp">
            {{ msgObj.message }}
            <div @click="handleClipboard(msgObj.message || '')" class="clipboard_warp" v-if="msgObj.message">
              <svg-icon icon-class="clipboard" />
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import { getGMessgaeDetails } from '@/api/message-management/family/list'
import { fetchList as getLogs } from '@/api/log-management/list'
import { fetchList as getUserMessagesBG } from '@/api/message-management/family/userList'

export default {
  data() {
    return {
      msgObj: {}, // 信息初始数据

      logObj: {}, // 日志详情

      userMsgObj: {}, // 用户信息列表
    }
  },
  filters: {
    typeFilter(type) {
      const typeOptions = [
        { id: 1, label: '系统消息' },
        { id: 3, label: '升级消息' },
        { id: 4, label: '日志消息' },
        { id: 5, label: '隐私协议变更消息' },
        { id: 6, label: '隐私协议变更消息' },
      ]
      let v = typeOptions.find(el => type === el.id)
      if (v) {
        return v.label
      }
      return ''
    },
    pushByFilter(type) {
      // 推送方式数组
      const pushTypeOptions = [
        { id: 1, label: '全部用户' },
        { id: 2, label: '指定用户' },
      ];
      let v = pushTypeOptions.find(el => type === el.id)
      if (v) {
        return v.label
      }
      return ''
    },
    protocolTypeFilter(type) {
      // 协议类型数组
      const protocolTypeOptions = [
        { id: 5, label: '用户协议' },
        { id: 6, label: '隐私政策' },
      ]
      let v = protocolTypeOptions.find(el => type === el.id)
      if (v) {
        return v.label
      }
      return ''
    },
  },
  computed: {
    versionObj() {
      try {
        if (this.msgObj.type === 3 && this.msgObj?.describes) {
          let arr = ['currentVersion', 'targetVersion'],
            obj = {},
            objAll = JSON.parse(this.msgObj.describes) || {}
          arr.forEach(el => {
            obj[el] = objAll[el] || ''
          })
          return obj
        }
      } catch (error) {
        console.log(error);
      }
      return {}
    },
    lHarList() {
      let obj = this.msgObj;
      let arr_version_1 = [{
        tips: '当前版本',
        value: 'currentVersion',
      }, {
        tips: '目标版本',
        value: 'targetVersion',
      }]
      let arr_protocol_1 = [{
        tips: '协议类型',
        value: 'type',
      }, {
        tips: '协议地址',
        value: 'message',
      },
      ]

      // {
      //   tips: '下载地址',
      //   value: 'picturePath',
      // }

      if (this.msgObj.type === 3) {
        params.describe = JSON.stringify({
          targetVersion: params.targetVersion,
          currentVersion: params.currentVersion,
        })
      }
      if (this.msgObj.type === '5,6') {
        params.type = this.ruleForm.protocolType
      }
    }
  },
  created() {
    this.getPageInfo()
  },
  methods: {
    getPageInfo() {
      let { id = 0 } = this.$route.query;
      id = parseInt(id) || 0
      getGMessgaeDetails({ id }).then(res => {
        if (res.code === 200) {
          this.msgObj = res.data || {}
        }
      })
      getLogs({
        pageNum: 1,
        pageSize: 1,
        messageId: id,
      }).then(res => {
        if (res.code === 200) {
          this.logObj = res.data || {}
        }
      })
      getUserMessagesBG({
        pageNum: 1,
        pageSize: 10,
        messageId: id,
      }).then(res => {
        if (res.code === 200) {
          this.userMsgObj = res.data || {}
        }
      })
    },
    handleClipboard(text) {
      this.$copyText(text).then(() => {
        this.$message({
          message: 'Copy successfully',
          type: 'success',
          duration: 1500
        })
      }, () => { });
    }
  },
}
</script>
<style scoped lang="scss">
.app-container {
  height: 100%;
  overflow: auto;
}

.main {
  width: 100%;
  height: 100%;
  flex: 1;
  background-color: #fff;
  border-radius: 16px;
  padding: 40px;
}

.clipboard_warp {
  cursor: pointer;
  display: flex;
}

.har-container {
  width: 100%;
  display: grid;
  grid-gap: 48px 20px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;

  .item {
    font-size: 14px;
    line-height: 18px;

    &.grid_column_1 {
      /* 让这个项目占满整行 */
      grid-column: 1 / -1;
    }

    .tips {
      color: #8B8B8B;
      padding-bottom: 16px;
    }

    .num {
      color: #15181D;
    }
  }

  .picture_path_warp {
    display: flex;
    align-items: center;

    .clipboard_warp {
      margin-left: 10px;
    }
  }
}
</style>